import React, { useState, useEffect } from 'react';
import { useDispatch, connect } from 'umi';
import { message, Modal, Button, Table, Input } from 'antd';
import styles from './RoleAuthUsers.less';
import { columns } from './userConfig';

const UsersSelect = (props) => {
  const { isModalVisible = false, handleCancel, handOk, selectUsers, common } = props;
  const { appCodeOfSelect } = common;
  const dispatch = useDispatch();
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [selectedRows, setSelectedRows] = useState([]);
  const [listOUser, setListOfUser] = useState([]);
  const [userAccount, setUserAccount] = useState();
  const [loading, setLoading] = useState(true);

  // useImperativeHandle(ref, () => ({
  //   handleSubmit,
  // }));

  useEffect(() => {
    setSelectedRows(selectUsers || []);
    setSelectedRowKeys(selectUsers?.map((d) => d.userAccount) || []);
  }, [selectUsers]);

  useEffect(() => {
    dispatch({
      type: 'commonRoleManageModel/getUserList',
      payload: { pageIndex: 1, pageSize: 1000000, appCode: appCodeOfSelect },
    }).then((res) => {
      const { code, message: errMsg, data } = res;
      if (code === 0) {
        setListOfUser(data?.dataList?.map((d) => ({ ...d, userId: d.id })));
      } else {
        message.error(errMsg);
      }
      setLoading(false);
    });
    return () => {};
  }, [appCodeOfSelect]);

  const handleOk = () => {
    handOk(selectedRows);
  };

  const onSelectChange = (rowKeys, rows) => {
    setSelectedRowKeys(rowKeys);
    setSelectedRows(rows);
  };

  const onUserSearch = () => {
    setLoading(true);
    dispatch({
      type: 'commonRoleManageModel/getUserList',
      payload: { pageIndex: 1, pageSize: 1000000, appCode: appCodeOfSelect, userAccount },
    }).then((res) => {
      const { code, message: errMsg, data } = res;
      if (code === 0) {
        setListOfUser(data?.dataList?.map((d) => ({ ...d, userId: d.id })));
      } else {
        message.error(errMsg);
      }
      setLoading(false);
    });
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  // const handleTableChange = (pagination, filters, sorter) => {
  //   setCurrent(pagination.current);
  // };

  return (
    <Modal
      width={600}
      title="选择用户"
      visible={isModalVisible}
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <div className={styles.root}>
        <div className={styles.menuTitleWrapper}>
          <Input
            placeholder="请输入用户信息"
            value={userAccount}
            onChange={(e) => setUserAccount(e.target.value)}
            style={{ marginRight: '20px' }}
          />
          <Button onClick={() => onUserSearch()}>查询</Button>
        </div>
        <div className={styles.menuTable}>
          <Table
            rowSelection={rowSelection}
            rowKey="userAccount"
            columns={columns}
            dataSource={listOUser}
            pagination={false}
            scroll={{ y: 260 }}
            // onChange={handleTableChange}
            loading={loading}
          />
        </div>
      </div>
    </Modal>
  );
};
export default connect((state) => state)(UsersSelect);
// export default forwardRef((props, ref) => <Cmp {...props} refInstance={ref} />);
